<template>
  <div>
    <div class="app-container">
      <el-row>
        <el-col :span="6">
          <div class="item">
            提现最小金额: <span>￥{{set.cash_min_money}}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item">
            服务费: <span>{{+set.cash_service_supplier}}%</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item">
            每天可提现次数: <span>{{set.cash_total_for_day}}次</span>
          </div>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="send">发起提现</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="app-container">
      <el-row>
        <el-col :span="6">
          <div class="item">
            总进帐: <span>￥{{amount}}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item">
            已提现: <span>￥{{cash}}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item">
            可提现: <span>￥{{amount - cash - check}}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item">
            审核中: <span>￥{{check}}</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title="提现申请:"
      :visible.sync="dialogVisible"
      width="30%">
      <span>
        <el-input v-model="total" placeholder="提现金额" />
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api'
export default {
  // 总流水, 已提, 审核中, 设置
  props: ['amount', 'cash', 'check', 'set'],
  data() {
    return {
      dialogVisible: false,
      total: ''
    }
  },
  methods: {
    send() {
      this.dialogVisible = true
    },
    save() {
      if (!this.total || isNaN(+this.total) || +this.total < 0) {
        return this.$message.error('提现金额错误')
      }
      if (+this.total < +this.set.cash_min_money) {
        return this.$message.error('最小提现金额错误')
      }
      // if (this.amount - +this.cash - +this.check <= 0) {
      //   return this.$message.error('余额不足')
      // }
      if (this.amount - +this.cash - +this.check <= +this.total) {
        return this.$message.error('余额不足!')
      }
      // 提现
      api.supplier.cash({
        amount: this.total
      }).then(response => {
        this.$notify({
          title: '成功',
          message: response.message || '保存成功',
          type: 'success',
          duration: 2000
        })
        this.loading = false
        this.dialogVisible = false
        // 刷新
        this.$router.push('/finance/cash?t=' + new Date().getTime())
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  background: #f3f5f7;
  height: 80px;
  margin-bottom: 20px;
  div {
    span {
      color: red;
      font-size: 16px;
      font-weight: 700;
    }
  }
}
</style>
